<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工列表</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="wrap">
        <h1>员工列表</h1>
        <div class="ctrl">
            <div class="age_sort nu">
                <a href="javascript:;">年龄从小到大</a>
                <a href="javascript:;">年龄从大到小</a>
                <a href="javascript:;" class="active">默认排序</a>
            </div>
            <div class="gender_show">
                <a href="javascript:;">只显示男性</a>
                <a href="javascript:;">只显示女性</a>
                <a href="javascript:;" class="active">默认</a>
            </div>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody id="container">
            </tbody>
        </table>
    </div>
    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/plugin.js"></script>
    <script>
        // 页面第一次渲染时触发
        $('#container').html(defaultSort().result)
        // 保存当前的年龄索引，性别索引
        var num = 2,
            idx = 2

        // 年龄从小到大/年龄从大到小/默认部分的功能
        $('.nu').on('click', function (e) {
            num = $(e.target).index()
            $(e.target).addClass('active').siblings().removeClass('active')
            if (num === 0) {
                $('#container').html(desc().result)
            } else if (num === 1) {
                $('#container').html(climaol().result)
            } else if (num === 2) {
                $('#container').html(defaultSort().result)
            }
            // 点击事件触发后立即执行
            tableRender(num, idx)
        })

        // 只显示男生/女生/默认部分的功能
        $('.gender_show').on('click', function (ev) {
            idx = $(ev.target).index()
            $(ev.target).addClass('active').siblings().removeClass('active')
            tableRender(num, idx)
        })
    </script>
</body>

</html>